<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>学员管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <div class="search-container">
          <el-form class="search-form" :model="form" ref="form" label-width="90px" label-position="right" inline>
            <el-row>
              <el-form-item label="昵称" prop="nickName">
                <el-input v-model="form.nickName"></el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="realName">
                <el-input v-model="form.realName"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phoneNumber">
                <el-input v-model="form.phoneNumber"></el-input>
              </el-form-item>
              <el-form-item label="企业名称" prop="companyName" v-if="showTotal">
                <el-input v-model="form.companyName"></el-input>
              </el-form-item>
              <el-form-item label="企业类型" prop="companyType" v-if="showTotal">
                <el-select v-model="form.companyType">
                  <el-option :value="item.key" :label="item.value" :key="index" v-for="(item,index) in companyTypeList"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="行业类型" prop="industryType" v-if="showTotal">
                <el-select v-model="form.industryType">
                  <el-option :value="item.key" :label="item.value" :key="index" v-for="(item,index) in industryTypeList"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="岗位类型" prop="jobType" v-if="showTotal">
                <el-select v-model="form.jobType">
                  <el-option :value="item.key" :label="item.value" :key="index" v-for="(item,index) in jobTypeList"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="状态" prop="status" v-if="showTotal">
                <el-select v-model="form.status">
                  <el-option value="0" label="正常"></el-option>
                  <el-option value="1" label="禁用"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row style="margin-left:40px">
              <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button @click="onReset">重置</el-button>
                <el-button @click="showTotal=!showTotal" type="text">{{showTotal ? '收起' : '展开'}}<i class="el-icon--right" :class="{'el-icon-arrow-down':!showTotal,'el-icon-arrow-up':showTotal}"></i></el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <div class="mt-20">
          <el-button type="primary" @click="onExport"><i class="el-iconexport element-icons"></i><span id="add_button">&nbsp;&nbsp;导出</span></el-button>
        </div>
        <div class="mt-20">
          <el-table :data="data" v-loading="loading">
            <el-table-column prop="nickName" label="昵称"  min-width="120">
              <template slot-scope="scope">
                 <span>{{scope.row.nickName ? scope.row.nickName : "--"}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="realName" label="姓名"  min-width="120">
              <template slot-scope="scope">
                 <span>{{scope.row.realName ? scope.row.realName : "--"}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="phoneNumber" label="手机号" min-width="120">
              <template slot-scope="scope">
                <span>{{scope.row.phoneNumber ? scope.row.phoneNumber : "--"}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="companyName" label="企业名称" min-width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.companyName ? scope.row.companyName : "--"}}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="jobType" label="岗位类型" min-width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-if="scope.row.jobType">
                  <template v-for="item in jobTypeList">
                    <span v-if="scope.row.jobType==item.key">{{item.value}}</span>
                  </template>
                </span> 
                <span v-else>--</span>               
              </template>
            </el-table-column> -->
            <el-table-column prop="sex" label="性别" min-width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.sex==0">男</span>
                <span v-else-if="scope.row.sex==1">女</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" min-width="100">
              <template slot-scope="scope">
                <el-tag type="info" v-if="scope.row.status==0">正常</el-tag>
                <el-tag type="danger" v-if="scope.row.status==1">禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" min-width="150">
              <template slot-scope="scope">
                <span v-if="scope.row.createDate">{{$utils.dateFormat(new Date(scope.row.createDate), 'yyyy-MM-dd hh:mm:ss')}}</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="150">
              <template slot-scope="scope">
                <el-button type="text" @click="goDetail(scope.row.customerId)">查看</el-button>
                <el-button type="text" @click="doEdit(scope.row.customerId)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="mt-10 t-right" v-if="total > 0">
          <el-pagination
            background
            :current-page="currentPage"
            :total="total"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { link } from 'fs';
  export default {
    data () {
      return {
        currentPage: 1,
        pageSize: 10,
        form: {},
        data: [],
        showTotal: false,
        total: 0,
        loading: false,
        industryTypeList: [],
        companyTypeList: [],
        jobTypeList: [],
        provinceList: [],
        cityList: [],
        excelData: [],
        exportFlag: true
      }
    },
    activated() {
      this.loadData()
    },
    created() {
      this.initList()
      this.getProvinceList()
    },
    methods: {
      initList() {
        this.$api.typeEnum.getIndustryType().then(res => {
          this.industryTypeList = res
        })
        this.$api.typeEnum.getCompanyType().then(res => {
          this.companyTypeList = res
        })
        this.$api.typeEnum.getJobType().then(res => {
          this.jobTypeList = res
        })
      },
      getProvinceList() {
        this.$api.getRegionById({type:1}).then(res => {
          if(res.success){
            this.provinceList = res.data
            this.loadData()
          }
        })
      },
      initCity(val) {
        this.$api.getRegionById({regionId: val, type: 2}).then(res => {
          if(res.success){
            this.cityList = res.data
          }
        })
      },
      loadData() {
        this.loading = true
        const params ={
          ...this.form,
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        }
        this.$api.customer.getList(params).then(res => {
          if(res.success){
            this.data = res.data.list
            this.total = res.data.total
            this.loading = false
          }else {
            this.loading = false
          }
        }).catch(err => {
          this.loading = false
        })
      },
      onSearch() {
        this.currentPage = 1
        this.loadData()
      },
      onReset() {
        this.$refs.form.resetFields()
        this.currentPage = 1
        this.loadData()
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.loadData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.loadData()
      },
      goDetail(id) {
        this.$router.push('/customer/detail/' + id)
      },
      doEdit(id) {
        this.$router.push('/customer/edit/' + id)
      },
      onExport(){
        const params ={
          ...this.form
        }
        if(!this.exportFlag){
            return;
        }
        console.info(this.exportFlag)
        
        this.$api.customer.onExport(params).then(res => {
          if(res){
            let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
            let url = window.URL.createObjectURL(blob)
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('id', 'downloadLink')
            link.setAttribute('download', '学员信息_' + this.$utils.dateFormat(new Date(), 'yyyyMMdd') +'.xls')
            document.body.appendChild(link)
            link.click()
            // 删除添加的a链接
            let objLink = document.getElementById('downloadLink')
            document.body.removeChild(objLink)
            // 释放内存
            window.URL.revokeObjectURL(url)
          }
        }).catch(err => {
          console.info(err)
        });

        this.exportFlag = true;
      },
      // onExport(){
      //   const params ={
      //     ...this.form
      //   }
      //   this.$api.customer.onExport(params).then(res => {
      //     if(res.success){
      //       this.excelData = res.data //你要导出的数据list。
      //       this.export2Excel()
      //     }
      //   }).catch(() => {

      //   });
      // },
      // export2Excel() {
      //   var that = this;
      //   require.ensure([], () => {
      //     const { export_json_to_excel } = require('../../excel/Export2Excel'); //这里必须使用绝对路径
      //     const tHeader = ['昵称','姓名', '手机号', '性别','出生日期','省份','城市'
      //         ,'区域','详细地址','企业名称','企业类型','行业类型',
      //         '岗位类型','钉钉','邮箱','学习目标']; // 导出的表头名
      //     const filterVal = ['nickName','realName', 'phoneNumber', 'sex','dateOfBirth','provinceName','cityName'
      //         ,'districtName','addressInfo','companyName','companyTypeName','industryTypeName',
      //         'jobTypeName','dingding','email','learnTarget']; // 导出的表头字段名
      //     const list = that.excelData;
      //     export_json_to_excel(tHeader, list, '学员信息');// 导出的表格名称，根据需要自己命名
      //   })
      // }
    }
  }
</script>

<style>

 
</style>